import React from 'react'
import {Picker, List, InputItem, DatePicker} from 'antd-mobile'
import {actions, connect} from 'mirrorx'
import Trial from '../../trial'

class App extends React.Component {
  blurAction (key, value) {
    const {onChangeCallback} = this.props
    this.props.form.validateFields(key, {force: true}, (err, values) => {
      let errMsgObj = this.props.errorMap || {}
      if (err && values[key]) {
        errMsgObj = {...errMsgObj, ...err}
      } else {
        errMsgObj = {...errMsgObj, ...{[key]: false}}
        onChangeCallback && onChangeCallback(value)
      }
      actions.insureModel.setErrorMap(errMsgObj)
    })
  }

  getInputValidate () {
    let inputTypeMap = {
      salary: 'number',
      benefitRatio: 'number',
      phone: 'tel',
      lastname: 'url',
      firstname: 'url',
      certiNo: 'url',
      email: 'email'
    }

    let patternMap = {
      firstname: /^[a-z0-9\s]{1,100}$/i,
      lastname: /^[a-z0-9\s]{1,100}$/i,
      benefitRatio: /^[0-9]{1,2}$|^100$/i,
      email: T.regObj.email,
      cnFullName: T.regObj.name
    }

    let maxLengthMap = {
      benefitRatio: 3
    }

    return {
      inputTypeMap,
      patternMap,
      maxLengthMap
    }
  }

  resetSelectList (list, key) {
    let listData = list.map((cItem) => {
      return {
        label: cItem.text,
        value: cItem.value
      }
    })

    return listData
  }

  getBlockDom () {
    const {item = {}, getFieldProps, errorMap = {}, onChangeCallback, type} = this.props
    let dom
    let initFactors = Trial.getInitTrialFactors()

    item.displayType = item.displayType === undefined ? 1 : item.displayType
    item.displayType = +item.displayType
    const Lang = window.LangMessage || {}
    const inputText = Lang.text_input || '请输入'
    const selectText = Lang.text_select || '请选择'
    let keycode = item.customizeCode
    let fieldKey = item.fieldKey
    let customizeName = item.customizeName
    let isRequired = item.isRequired === '1'
    let initValue = item.value
    if (type === 2) {
      initValue = initValue || initFactors[keycode]
    }

    if (keycode === 'certificateType') {
      customizeName = '身分証明書の種類'
      item.items = [{
        text: '身分証明書',
        value: 2
      }]
      if (item.items && item.items[0]) {
        item.items[0].text = '身分証明書'
      }
    }
    if (keycode == 'certificateNumber') {
      customizeName = '身分証明書番号'
    }

    switch (item.displayType) {
      case 1 :
        let {inputTypeMap, patternMap, maxLengthMap} = this.getInputValidate()
        let tipMsg = customizeName + inputText
        dom = <InputItem key={fieldKey}
          {...getFieldProps(fieldKey, {
            initialValue: initValue,
            rules: [{
              required: isRequired,
              message: item.tip || tipMsg,
              pattern: patternMap[keycode] || item.pattern
            }]
          })}
          disabled={item.disabled}
          maxLength={maxLengthMap[keycode] || item.maxLength || 40}
          onBlur={this.blurAction.bind(this, fieldKey)}
          type={inputTypeMap[keycode] || item.type}
          error={!!errorMap[fieldKey]}
          onErrorClick={() => T.showError(item.tip || tipMsg)}
          clear
          placeholder={tipMsg}
        >{customizeName}</InputItem>
        break
      case 2:
        let listData = this.resetSelectList(item.flist || item.items, keycode)
        if (initValue !== undefined && initValue !== null) {
          if (!T.isArray(initValue)) {
            initValue = [initValue]
          }
        } else {
          if (keycode !== 'relationWithHolders') {
            initValue = listData[0] && listData[0].value
            if (initValue !== undefined) {
              initValue = [initValue]
            }
          }
        }

        dom = <Picker
          // extra='请选择'
          data={listData}
          title={customizeName} cols={1}
          {...getFieldProps(fieldKey, {
            initialValue: initValue,
            rules: [{
              required: isRequired,
              message: item.tip || (customizeName + selectText)
            }]
          })}
          extra={selectText}
          disabled={item.disabled}
          onOk={value => onChangeCallback && onChangeCallback(value[0])}
          onDismiss={e => console.log('dismiss', e)}
        >
          <List.Item arrow='horizontal'>{customizeName}</List.Item>
        </Picker>
        break
      case 5:
        if (keycode === 'birthday') {
          if (!initValue) {
            initValue = Trial.getAdultDate()
          }
          let minDate = new Date()
          minDate.setFullYear(minDate.getFullYear() - 60)
          if (this.props.type === 1) {
            item.minDate = minDate
            item.maxDate = Trial.getAdultDate()
          } else {
            let today = new Date()
            today.setFullYear(today.getFullYear() - 4)

            item.maxDate = today
            item.minDate = minDate
          }
        }
        if (initValue) {
          if (typeof initValue === 'string') {
            initValue = new Date(initValue.replace(/-/g, '/'))
          }
        }
        dom = <DatePicker
          {...getFieldProps(fieldKey, {
            initialValue: initValue,
            rules: [{
              required: isRequired,
              message: item.tip || (customizeName + selectText)
            }]
          })}
          onOk={value => onChangeCallback && onChangeCallback(value)}
          disabled={item.disabled}
          extra={selectText}
          mode='date'
          minDate={item.minDate}
          maxDate={item.maxDate}
        >
          <List.Item arrow='horizontal'>{customizeName}</List.Item>
        </DatePicker>
        break
      default:
        dom = null
    }
    return dom
  }
  render () {
    return this.getBlockDom()
  }
}

export default connect(state => {
  return {
    errorMap: state.insureModel.errorMap || {}
  }
})(App)
